<template>
    <div class="home-wrapper">
      <div>
        <div class="home-top" >
            <div class="left" >
              <a v-if="userInfo.babyPhoto">
                <img :src="userInfo|filterSrc" class="portrait">
              </a>
              <a v-else>
                <img src="../../../static/images/babyBoy.png" class="portrait" v-if="userInfo.sex=='男' || userInfo.sex==0">
                <img src="../../../static/images/babyGirl.png" class="portrait" v-else>
              </a>

              <div class="name-right">
                <p class="name">{{userInfo.name}}</p>
                <p class="sex-age">
                  <span  v-if="userInfo.sex=='男'">男宝</span>
                  <span  v-else-if="userInfo.sex=='女'">女宝</span>
                  <span style="margin-left: 10px;">{{userInfo.age}}</span>
                </p>
              </div>
            </div>
           <div class="btn-right">
             <a @click="addChild">新增</a>
             <a class="switch-btn" @click="switchPopup=true">切换</a>
           </div>
         </div>

        <div class="inoculate-con">
          <div class="record-left" @click="goRecord">
            <img src="../../../static/images/home/record-img.png" class="record-img">
            <span>接种记录</span>
          </div>
          <div class="plan-right" @click="goPlan">
            <img src="../../../static/images/home/plan-img.png" class="plan-img">
            <span>接种计划</span>
          </div>
        </div>

        <div class="recommend-con" v-if="recommendInfo">
          <div v-if="recommendStatus=='待接种'">
            <a v-if="recommendInfo.name">
              <p class="recommend-title">待接种</p>
              <div class="vaccine-box">
                <div class="left">
                  <p class="vaccine-name">{{recommendInfo.name}}</p>
                  <p class="dose-age">
                    <span class="doses"><span class="first">第{{recommendInfo.dose}}剂</span>/共{{recommendInfo.totaldose}}剂</span>
                    <span v-if="recommendInfo.ispay==0">自费</span>
                    <span v-else>免费</span>
                    <span style="margin-left:10px;">{{recommendInfo.type}}</span>
                  </p>
                </div>
                <a  class="remain-time" style="flex:0 0 84px">
                  <p class="remain-text">距接种剩余</p>
                  <div class="num-day"><span>{{recommendInfo.dayCount}}</span>天</div>
                </a>
              </div>
            </a>
            <a v-else>
              <div class="vaccine-box">
                <div class="left left-quick">
                  快速预约
                </div>
                <a  class="remain-time" style="flex:0 0 84px">
                  <p class="remain-text">距接种剩余</p>
                  <div class="num-day"><span>{{recommendInfo.dayCount}}</span>天</div>
                </a>
              </div>
            </a>
          </div>
          <div v-else>
            <p class="recommend-title">接种推荐</p>
            <div class="vaccine-box">
              <div class="left">
                <p class="vaccine-name">{{recommendInfo.name}}</p>
                <p class="dose-age">
                  <span class="doses"><span class="first">第{{recommendInfo.dose}}剂</span>/共{{recommendInfo.totaldose}}剂</span>
                  <span>建议接种时间 {{recommendInfo.age}}月龄</span>
                </p>
              </div>
              <a class="appint-btn" v-if="appointStatus==1" @click="appointDoctor">立即预约</a>
              <a  class="remain-time" style="flex:0 0 84px"  v-else>
                <p class="remain-text">距接种剩于</p>
                <div class="num-day"><span>10</span>天</div>
              </a>
            </div>
          </div>

        </div>

        <div class="service-con">
          <p class="service-title">服务大全</p>
          <div class="top">
            <div @click="appointOnce">
              <img src="../../../static/images/home/appoint-bar.png">
              <p>接种预约</p>
            </div>
            <div @click="wait">
              <img src="../../../static/images/home/search-bar.png">
              <p>接种点查询</p>
            </div>
            <div @click="wait">
              <img src="../../../static/images/home/inspection-bar.png">
              <p>入学查验</p>
            </div>
          </div>
          <div class="center">
            <div @click="wait">
              <img src="../../../static/images/home/adult-bar.png">
              <p>成人接种</p>
            </div>
            <div @click="wait">
              <img src="../../../static/images/home/mother-bar.png">
              <p>妈妈课堂</p>
            </div>
            <div @click="wait">
              <img src="../../../static/images/home/baby-bar.png">
              <p>宝宝商城</p>
            </div>
          </div>
        </div>
      </div>


      <div class="home-footer">
        <div class="home-bar active">
          <img src="../../../static/images/home/footer-home-select.png">
          <p>首页</p>
        </div>
        <div class="appoint-bar" @click="goAppoint">
          <img src="../../../static/images/home/footer-appoint.png">
          <p>接种预约</p>
        </div>
        <div class="mine-bar" @click="goMine">
          <img src="../../../static/images/home/footer-mine.png">
          <p>我的</p>
        </div>
      </div>

      <!--切换宝宝-->
      <div v-transfer-dom>
        <popup v-model="switchPopup" position="bottom" class="switch-popup">
          <div class="header">
            <h4>切换宝宝</h4>
            <img src="../../../static/images/record/close.png" class="close" @click="switchPopup=false">
          </div>
          <div class="con">
            <radio :options="radiobabyList"
                   v-model="radiobabyValue"
                   @on-change="radiobabyChange"></radio>
          </div>
        </popup>
      </div>

    </div>
</template>

<script>
  import { XButton, TransferDom, Popup ,Radio} from 'vux';
  import { mapGetters } from 'vuex';
  import url from '../../../config/app.config'

  export default {
        name: "index",
        metaInfo () {
          return {
            title: '大健康'
          }
        },
       data(){
         return {
           appointStatus:1,
           radiobabyList:[],
           radiobabyValue:null,
           userInfo:{},
           userList:[],
           switchPopup:false,
           userId:sessionStorage.getItem('userId'),
           babyId:sessionStorage.getItem('childId'),
           recommendInfo:{},
           recommendStatus:'',
         }
       },
      computed: {
        ...mapGetters([
          'userInfoGetter',
        ]),
      },
      mounted(){
        this.userInfo=JSON.parse(sessionStorage.getItem('userInfo'));
        this.getChild(this.babyId);
        this.radiobabyValue=sessionStorage.getItem('childId')
      },
    filters:{
      filterSrc(val){
        let p=url.http_url+'/'+val.babyPhoto;
        return p
      }
    },
       methods:{
         addChild(){
           this.$router.push({path: '/addOne'})
         },
         goRecord(){
           this.$router.push({path: '/record'})
         },
         goPlan(){
           this.$router.push({path: '/plan'})
         },
         appointOnce(){
           this.$router.push({path: '/fastappint'})
         },
         appointDoctor(){
           this.$router.push({path: '/fastAppointDoctor'})
         },
         goMine(){
           this.$router.push({path: '/personal'})
         },
         appointBar(){
           this.$router.push({path: '/appointment'})
         },
         wait(){
           this.$vux.toast.text(' 正在开发中，敬请期待', 'middle')
         },
         goAppoint(){
           this.$router.push({path: '/appointment'})
         },
         getChild(babyId){
           this.$api.get('/userHandle/findAllChildren/'+this.userId).then( (res)=> {
              if(res.data.result==0){
                sessionStorage.setItem("children", JSON.stringify(res.data.obj));
                this.radiobabyList.length=0;
                this.userList=res.data.obj;
                for(let i in res.data.obj){
                  this.radiobabyList.push({
                    key:res.data.obj[i].id,
                    value:res.data.obj[i].name
                  })
                }
              }
           })

           this.$api.get(`/vaccinationReservation/getHomeRecommend/${this.userId}/${babyId}`).then( (res)=> {
             if(res.data.result==0){
                this.recommendInfo=res.data.obj;
                this.recommendStatus=res.data.data;
             }
           })

         },
         radiobabyChange(val){
          for(let i in this.userList){
              if(this.userList[i].id==val){
                 this.userInfo=this.userList[i]
                sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo));
                sessionStorage.setItem('childId',this.userInfo.id);
                this.getChild(val);
                this.babyId=val;
              }
           }
           this.switchPopup=false;

           this.$api.post('/userHandle/changeBaby',{
             id:this.userId,
             selectBaby:val
           }).then( (res)=> {})

         }
       },
       components: {
        XButton,
        Popup,
        Radio
      },
      directives: {
        TransferDom
      },
      beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
        next();
      }
    }
</script>

<style lang="scss">
  .home-wrapper{
     padding-top:20px;
      .home-top{
        background: url('../../../static/images/home/top-bg.png');
        background-size: 100% 100%;
        padding:20px;
        margin:0 15px;
        .left{
          display: inline-block;
          .portrait{
            width:80px;
            height:80px;
            background:rgba(229,229,229,1);
            border:2px solid rgba(255,255,255,1);
            border-radius:50%;
            vertical-align: middle;
          }
          .name-right{
            display: inline-block;
            vertical-align: middle;
            margin-left:20px;
            .name{
              font-size:24px;
              font-weight:bold;
              color:rgba(255,255,255,1);
              max-width: 120px;
              overflow:hidden;
              white-space:nowrap;
              text-overflow:ellipsis;
            }
            .sex-age{
              font-size:14px;
              color:rgba(255,232,232,1);
              margin-top:15px;
            }
          }
        }
        .btn-right{
          display: inline-block;
          float: right;
          a{
            display: block;
            color:rgba(255,255,255,1);
            font-size: 14px;
            border:1px solid #fff;
            border-radius:10px;
            width:44px;
            height:22px;
            line-height: 22px;
            text-align: center;
            &.switch-btn{
              margin-top:25px;
            }
          }
        }
      }
      .inoculate-con{
        display: flex;
        margin:10px 15px;
         .record-left{
           background:rgba(255,255,255,1);
           box-shadow:-1px 0px 47px 4px rgba(50,51,51,0.06);
           border-radius:10px;
           flex:1;
           margin-right:10px;
           padding:20px 0;
           text-align: center;
           width: 100%;
            .record-img{
              width:29px;
              height: 32px;
            }
          }
        .plan-right{
          background:rgba(255,255,255,1);
          box-shadow:-1px 0px 47px 4px rgba(50,51,51,0.06);
          border-radius:10px;
          padding:18px 0;
          text-align: center;
          flex:1;
          .plan-img{
            width:34px;
            height: 36px;
          }
        }
        img{
          vertical-align: middle;
          margin-right:15px;
        }
        span{
          vertical-align: middle;
          font-size:18px;
          font-weight:bold;
          color:rgba(218,74,74,1);
        }
      }
      .recommend-con{
        background:#FFFFFF;
        box-shadow:-1px 0px 19px 2px rgba(50,51,51,0.06);
        border-radius:10px;
        margin:0 15px;
        padding:15px;
        .recommend-title{
          font-size:14px;
          color:rgba(0,0,0,1);
          margin-bottom: 12px;
          font-family:PingFang-SC-Regular;
        }
        .vaccine-box{
          display: flex;
          justify-content:space-between;
            .left{
              &-quick{
                color: #da4a4a;
                padding-top: 22px;
                font-size: 22px;
              }
              margin-right: 10px;
              .vaccine-name{
                color:rgba(218,74,74,1);
                font-size:15px;
                font-family:PingFang-SC-Regular;
                margin-bottom: 10px;
                line-height: 20px;
              }
              .dose-age{
                font-size:12px;
                color:#636161;
                .doses{
                  margin-right:20px;
                  .first{
                    color:rgba(218,74,74,1);
                  }
                }
              }
            }
          .appint-btn{
            width:90px;
            height: 30px;
            line-height: 30px;
            display: inline-block;
            background:rgba(245,99,99,1);
            border-radius:10px;
            font-size:14px;
            color:rgba(255,255,255,1);
            text-align: center;
            flex: 0 0 90px;
          }
          .remain-time{
            background: url('../../../static/images/home/remain-time.png') no-repeat;
            background-size: 100% 100%;
            width:84px;
            height: 70px;
            .remain-text{
              font-size:9px;
              color:rgba(0,0,0,1);
              text-align: center;
              margin-top:15px;
            }
            .num-day{
              text-align: center;
              font-size: 9px;
              color:#636161;
              margin-top:5px;
              span{
                font-size:24px;
                font-weight:bold;
                color:rgba(220,88,88,1);
              }
            }
          }
        }
      }
      .service-con{
        background:rgba(255,255,255,1);
        box-shadow:-1px 0px 19px 2px rgba(50,51,51,0.06);
        border-radius:10px;
        margin:10px 15px 70px;
        padding-bottom: 30px;
        .service-title{
          color:rgba(0,0,0,1);
          font-size:14px;
          padding:15px 0 20px 15px;
        }
        img{
          width:52px;
          height: 52px;
        }
        .top,.center{
          display: flex;
          margin-bottom: 25px;
          div{
            flex: 1;
            text-align: center;
            p{
              text-align: center;
              color:rgba(122,122,122,1);
              margin-top:7px;
            }
          }
        }
      }
      .home-footer{
        position: fixed;
        bottom: 0;
        width:100%;
        box-shadow:0px -3px 10px 0px rgba(50,51,51,0.08);
        display: flex;
        text-align: center;
        padding:10px 0;
        background:rgba(255,255,255,1);
        p{
          margin-top:4px;
          font-size:10px;
          color:rgba(122,122,122,1);
        }
        .active{
          p{
            color:rgba(218,74,74,1);
          }
        }
        .home-bar{
          flex:1;
          img{
            width:23px;
            height: 20px;
          }
        }
        .appoint-bar{
          flex:1;
          img{
            width:23px;
            height: 20px;
          }
        }
        .mine-bar{
          flex:1;
          img{
            width:20px;
            height: 20px;
          }
        }
      }
      .no-baby{
       margin-top:60%;
        .weui-btn{
          width:80%;
          margin: 0 auto;
          background:rgba(245,99,99,1);
          font-size:15px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          height:40px;
          line-height: 40px;
          &.weui-btn_default:not(.weui-btn_disabled):active{
            background:rgba(245,99,99,1);
            color:rgba(255,255,255,1);
          }
        }
      }
  }
  .switch-popup .con .weui-cells_radio{
    max-height: 250px;
  }
</style>
